<html>
    <head>
        <title>page.json 文件</title>
    </head>
    <body>
        <script>
             // pages.json  页面路由

                    
             // 官网url : https://uniapp.dcloud.net.cn/collocation/pages.html#app-titlenview-splitlinestyles

                    /*
                        一、简述

                                pages.json 文件用来对uni-app 进行全局配置， 决定"页面文件的路径"、"窗口样式"、"原生导航栏"、"底部的原生 tabbar"等。

                                导航栏高度为 44px (不含状态栏)，tabBar 高度为 50px (不含安全区)

                                它类似微信小程序中app.json的页面管理部分。

                                注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置
                    */

                    /*
                        二、配置列表

                                属性                类型             必填                  描述                           平台兼容

                            1、globalStyle         Object           0                  设置默认页面的窗口表现              

                            2、pages               Object Array     1                  设置页面路径及窗口表现

                            3、easycom             Object           0                  组件自动引入规则                     2.5.5+

                            4、tabBar              Object           0                  设置底部 tab 的表现                    

                            5、condition           Object           0                  启动模式配置

                            6、subPackages         Object Array     0                  分包加载配置                        H5不支持

                            7、preloadRule         Object           0                  分包预下载规则                      微信小程序、支付宝小程序

                            8、workers             String           0                  Worker 代码放置的目录               微信小程序、支付宝小程序

                            9、leftWindow          Object           0                  大屏左侧窗口                        H5

                            10、topWindow          Object           0                  大屏顶部窗口                        H5

                            11、rightWindow        Object           0                  大屏右侧窗口                        H5

                            12、unildRouter        Object           0                  自动跳转相关配置

                            13、entryPagePath      String           0                  默认启动首页                        微信小程序、支付宝小程序、抖音小程序
                    */


                    /*
                        三、 globalStyle 


                                    用于设置应用的状态栏、导航条、标题、窗口背景色等？



                                    属性                            类型             默认值         描述                                               平台差异说明

                                1、navigationBarBackgroundColor    HexColor          #F8F8F8       导航栏背景颜色（同状态栏背景色）                     APP与H5为#F8F8F8，小程序平台请参考相应小程序文档

                                2、navigationBarTextStyle          String           black          导航栏标题颜色及状态栏前景颜色，仅支持 black/white   

                                3、navigationBarTitleText          String                          导航栏标题文字内容
                                
                                4、backgroundColor                 HexColor         #ffffff        下拉显示出来的窗口的背景色                           微信小程序

                                5、navigationStyle                 String           default        导航栏样式，仅支持 default/custom。                  
                                                                                                   custom即取消默认的原生导航栏，需看使用注意

                                6、backgroundTextStyle             String           dark           下拉 loading 的样式，仅支持 dark / light             微信小程序

                                7、enablePullDownRefresh           Boolean          flase          是否开启下拉刷新，详见页面生命周期。

                                8、onReachBottomDistance           Number           50             页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期

                                9、backgroundColorTop              HexColor         #ffffff        顶部窗口的背景色（bounce回弹区域）

                                10、backgroundColorBottom          HexColor         #ffffff        底部窗口的背景色（bounce回弹区域）

                                11、titleImage                     String                          导航栏图片地址（替换当前文字标题），                   支付宝小程序、H5、APP
                                                                                                   支付宝小程序内必须使用https的图片链接地址

                                12、transparentTitle               String           none           导航栏整体（前景、背景）透明设置。                     支付宝小程序、H5、APP
                                                                                                   支持 always 一直透明 / auto 滑动自适应 / none 不透明

                                13、titlePenetrate                 String           NO             导航栏点击穿透                                       支付宝小程序、H5

                                14、pageOrientation                String           portrait       横屏配置，屏幕旋转设置，                              App 2.4.7+、微信小程序、QQ小程序
                                                                                                   仅支持 auto / portrait / landscape 详见 
                                                                                                   https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html


                                15、animationType                  String            pop-in        窗口显示的动画效果，详见：窗口动画
                                                                                                   https://uniapp.dcloud.net.cn/api/router#animation   App

                                16、animationDuration              Number            300           窗口显示动画的持续时间，单位为 ms                      App

                                17、app-plus                       Object                          设置编译到 App 平台的特定样式，配置项参考下方 app-plus  App

                                18、app-harmony                    Object                          设置编译到 App 平台的特定样式，配置项参考下方 app-harmony    App 
                                                                                                   https://uniapp.dcloud.net.cn/collocation/pages.html#app-harmony

                                19、h5                             Object                          设置编译到 H5 平台的特定样式，配置项参考下方 H5
                                                                                                   https://uniapp.dcloud.net.cn/collocation/pages#h5

                                20、mp-alipay                      Object                          设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY     支付宝小程序
                                                                                                   https://uniapp.dcloud.net.cn/collocation/pages#mp-alipay

                                21、mp-weixin                      Object                          设置编译到 mp-weixin 平台的特定样式，配置项参考下方 MP-WEIXIN     微信小程序
                                                                                                   https://uniapp.dcloud.net.cn/collocation/pages#mp-weixin

                                22、mp-baidu                       Object                          设置编译到 mp-baidu 平台的特定样式，配置项参考下方 MP-BAIDU       百度小程序
                                                                                                   https://uniapp.dcloud.net.cn/collocation/pages#mp-baidu

                                23、mp-toutiao                     Object                          设置编译到 mp-toutiao 平台的特定样式                             抖音小程序

                                24、mp-lark                        Object                          设置编译到 mp-lark 平台的特定样式                                飞书小程序

                                25、mp-qq                          Object                          设置编译到 mp-qq 平台的特定样式                                  QQ小程序

                                26、mp-kuaishou                    Object                          设置编译到 mp-kuaishou 平台的特定样式                            快手小程序

                                27、mp-jd                          Object                          设置编译到 mp-jd 平台的特定样式                                  京东小程序

                                28、mp-xhs                         Object                          设置编译到 mp-xhs 平台的特定样式                                 小红书小程序

                                29、usingComponents                Object                          引用小程序组件，参考 小程序组件
                                                                                                   https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81

                                30、renderingMode                 String                           同层渲染webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层    微信小程序

                                31、leftWindow                     Boolean       true              当存在 leftWindow 时，默认是否显示 leftWindow                      H5

                                32、topWindow                      Boolean       true              当存在 topWindow 时，默认是否显示 topWindow                         H5

                                33、rightWindow                    Boolean       true              当存在 rightWindow 时，默认是否显示 rightWindow                     H5

                                34、rpxCalcMaxDeviceWidth         Number         960               rpx 计算所支持的最大设备宽度，单位 px                                App（vue2 且不含 nvue）、H5（2.8.12+）

                                35、rpxCalcBaseDeviceWidth        Number         375               rpx 计算使用的基准设备宽度，
                                                                                                   设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算         App（vue2 且不含 nvue）、H5（2.8.12+）
                                                                                                   ，单位 px

                                36、rpxCalcIncludeWidth           Number         750               rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx               App（vue2 且不含 nvue）、H5（2.8.12+）

                                37、dynamicRpx                    Boolean        false             动态 rpx，屏幕大小变化会重新渲染 rpx                                 App-nvue（vue3 固定值为 true） 3.2.13+

                                38、maxWidth                      Number                           单位px，当浏览器可见区域宽度大于maxWidth时，
                                                                                                   两侧留白，当小于等于maxWidth时，页面铺满；
                                                                                                   maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)
                    */


                    /*
                        四、topWindow

                                   uni-app 2.9+ 新增 leftWindow, topWindow, rightWindow 配置。用于解决宽屏适配问题。
                                   
                                   以现有的手机应用为mainWindow，在左、上、右，可以追加新的页面显示窗体。

                                   整体的宽屏适配思路，参考单独的宽屏适配指南：  https://uniapp.dcloud.net.cn/tutorial/adapt


                                   属性                类型                默认值            描述

                                1、path               String                               配置页面路径

                                2、style              Object                               配置页面窗口表现，配置项参考下方 pageStyle https://uniapp.dcloud.net.cn/collocation/pages#style

                                3、matchMedia         Object                               配置显示该窗口的规则，配置项参考下方 matchMedia  https://uniapp.dcloud.net.cn/collocation/pages#matchmedia


                                ★、注意：

                                        <1>、目前 style 节点仅支持配置 width，height 等 css 样式相关属性

                                        <2>、如果需要当存在 topwindow 时，自动隐藏页面的 navigationBar，根据需求不同在App.vue中配置如下 css：

                                                    ①、只需要隐藏某个页面的 navigationBar :
                                                    
                                                        /* 隐藏路径为 pages/component/view/view 页面的 navigationBar *

                                                            .uni-app--showtopwindow [data-page="pages/component/view/view"] uni-page-head {
                                                                display: none;
                                                            }

                                                    ②、需要隐藏大部分页面的 navigationBar ,显示某个页面的 navigationBar：

                                                          /* 隐藏所有页面的 navigationBar *
                                                            .uni-app--showtopwindow uni-page-head {
                                                                display: none;
                                                            }

                                                          /* 显示路径为 pages/component/view/view 页面的 navigationBar *
                                                            .uni-app--showtopwindow [data-page="pages/component/view/view"] uni-page-head {
                                                                display: block;
                                                            }

                    */

                    /*
                        五、leftWindow

                                同上
                    */

                    /*
                        六、rightWindow

                                同上
                    */

                    /*
                        七、pages

                                uni-app 通过 pages 节点配置应用由哪些页面组成，

                                pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：


                                   属性               类型            默认值          描述

                                 1、path             String                          配置页面路径

                                 2、style            Object                          配置页面窗口表现，配置项参考下方 pageStyle :https://uniapp.dcloud.net.cn/collocation/pages#style

                                 3、needLogin        Boolean         false           是否需要登录才可访问


                                ★、注意：
                                        
                                       ①、pages节点的第一项为应用入口页（即首页）

                                       ②、应用中新增/减少页面，都需要对 pages 数组进行修改

                                       ③、文件名不需要写后缀，框架会自动寻找路径下的页面资源


                                ★、代码示例：

                                        开发目录为：

                                            ┌─pages
                                            │  ├─index
                                            │  │  └─index.vue
                                            │  └─login
                                            │     └─login.vue
                                            ├─static
                                            ├─main.js
                                            ├─App.vue
                                            ├─manifest.json
                                            └─pages.json

                                        则需要在 pages.json 中填写：

                                            {
                                                "pages": [
                                                    {
                                                        "path": "pages/index/index",
                                                        "style": { ... }
                                                    }, {
                                                        "path": "pages/login/login",
                                                        "style": { ... }
                                                    }
                                                ]
                                            }
                    */

                    /*
                        八、style
                                        
                                用于设置每个页面的状态栏、导航条、标题、窗口背景色等。

                                页面中配置项会覆盖 globalStyle 中相同的配置项



                                属性                                类型                 默认值                描述                                                                         平台差异说明

                               1、navigationBarBackgroundColor	   HexColor             #F8F8F8              导航栏背景颜色（同状态栏背景色）                                            APP与H5为#F8F8F8，小程序平台请参考相应小程序文档

                               2、navigationBarTextStyle           String               black                导航栏标题颜色及状态栏前景颜色，仅支持 black/white

                               3、navigationBarTitleText           String                                    导航栏标题文字内容
                               
                               4、navigationBarShadow              Object                                    导航栏阴影，配置参考下方 导航栏阴影
                                                                                                             https://uniapp.dcloud.net.cn/collocation/pages#navigationBarShadow

                               5、navigationStyle                  String               default              导航栏样式，仅支持 default/custom。                                       微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
                                                                                                             custom即取消默认的原生导航栏，需看使用注意
                                                                                                             https://uniapp.dcloud.net.cn/collocation/pages#customnav

                               6、disableScroll                    Boolean              false                设置为 true 则页面整体不能上下滚动（bounce效果），                          微信小程序（iOS）、百度小程序（iOS）
                                                                                                             只在页面配置中有效，在globalStyle中设置无效

                               7、backgroundColor                  HexColor             #ffffff              #ffffff                                                                 微信小程序、百度小程序、抖音小程序、飞书小程序、京东小程序

                               8、backgroundTextStyle              String               dark                 下拉 loading 的样式，仅支持 dark/light

                               9、enablePullDownRefresh            Boolean              false                是否开启下拉刷新，详见页面生命周期。
                                                                                                             https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

                            　10、onReachBottomDistance            Number               50                   页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页 "面生命周期"

                              11、backgroundColorTop               HexColor            #ffffff               顶部窗口的背景色（bounce回弹区域）                                         仅IOS平台

                              12、backgroundColorBottom            HexColor            #ffffff               底部窗口的背景色（bounce回弹区域）                                         仅IOS平台

                              13、disableSwipeBack                 Boolean             false                 是否禁用滑动返回                                                           App-iOS（3.4.0+）

                              14、titleImage                       String                                    导航栏图片地址（替换当前文字标题），                                         支付宝小程序、H5、App
                                                                                                            支付宝小程序内必须使用https的图片链接地址

                              15、transparentTitle                 String              none                  导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明          支付宝小程序、H5、APP

                              16、titlePenetrate                   String              NO                    导航栏点击穿透                                                             支付宝小程序、H5

                              17、app-plus                         Object                                     设置编译到 App 平台的特定样式，配置项参考下方 app-plus                      App

                              18、app-harmony                      Object                                     设置编译到 App 平台的 HarmonyOS 特有样式，配置项参考下方 app-harmony        App

                              19、h5                               Object                                     设置编译到 H5 平台的特定样式，配置项参考下方 H5                             H5

                              20、mp-alipay                        Object                                     设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY               支付宝小程序

                              21、mp-weixin                        Object                                     设置编译到 mp-weixin 平台的特定样式                                       微信小程序

                              22、mp-baidu                         Object                                     设置编译到 mp-baidu 平台的特定样式                                        百度小程序

                              23、mp-toutiao                       Object                                     设置编译到 mp-toutiao 平台的特定样式                                      抖音小程序

                              24、mp-lark                          Object                                     设置编译到 mp-lark 平台的特定样式                                         飞书小程序

                              25、mp-qq                            Object                                     设置编译到 mp-qq 平台的特定样式                                           qq小程序

                              26、mp-kuaishou                      Object                                     设置编译到 mp-kuaishou 平台的特定样式                                     快手小程序

                              27、mp-jd                            Object                                     设置编译到 mp-jd 平台的特定样式                                            京东小程序

                              28、usingComponents                  Object	                                  引用小程序组件，参考 小程序组件                                            App、微信小程序、支付宝小程序、百度小程序、京东小程序

                              29、leftWindow                        Boolean                 true              当存在 leftWindow时，当前页面是否显示 leftWindow                          H5

                              30、topWindow                        Boolean                  true               当存在 topWindow 时，当前页面是否显示 topWindow                          H5

                              31、rightWindow                     Boolean                 true              当存在 rightWindow 时，当前页面是否显示 rightWindow                         H5

                              32、maxWidth                        Number                                    单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，                        H5
                                                                                                            当小于等于maxWidth时，页面铺满；
                                                                                                            不同页面支持配置不同的maxWidth；
                                                                                                            maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)
                            ★、注意：

                                    ①、使用maxWidth 时，页面内 fixed 元素需要使用 --window-left、--window-right 来保证布局位置正确

                                    ②、鸿蒙中使用 backgroundColor 时不支持设置为透明 transparent

                                    ③、支付宝小程序
                            
                            ★、代码示例：

                                        {
                                            "pages":[
                                                {
                                                    "path":"pages/index/index",
                                                    "style":{
                                                        "navigationBarTitleText":"首页" ,// 设置页面标题文字
                                                        "enablePullDownRefresh":true  // 开启下拉刷新
                                                    }
                                                }
                                            ]
                                        }
                    */

                    /*
                        九、easycom
                                
                                <1> 概述：

                                            传统 Vue 组件，需要安装、引用、注册，三个步骤后才能使用组件。

                                            easycom将其精简为一步。

                                            只要组件路径符合规范(具体见下)，就可以不用引用、注册， 直接在页面使用。

                                            eg:
                                                    <template>
                                                        <view class="container">
                                                            <comp-a></comp-a>
                                                            <uni-list>
                                                            </uni-list>
                                                        </view>
                                                    </template>
                                                    <script>
                                                        
                                                        // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
                                                        export default {
                                                            data() {
                                                                return {}
                                                            }
                                                        }
                                                    <//script>


                                <2>、路径规范：

                                            ①、 安装在项目根目录下的 components 目录下，并符合 " components/组件名/组件名.vue " 的路径规范。

                                            ②、 安装在 uni_modules 下，路径为 " uni_modules/插件ID、components/组件名/组件名。vue " 


                                                ★、工程目录：

                                                        ┌─components
                                                        │  └─comp-a
                                                        │    └─comp-a.vue      符合easycom规范的组件
                                                        |
                                                        └─uni_modules          [uni_module](/plugin/uni_modules.md)中符合easycom规范的组件
                                                        └─uni_modules
                                                            └─uni-list
                                                            └─components
                                                                └─uni-list
                                                                └─ uni-list.vue
                                                

                                                ★、不管components目录下安装了多少组件， easycom 打包会自动剔除没有使用的组件，对组件库的使用尤为友好。

                                                    组件库批量安装，随意使用，自动按需打包。
                                                    
                                                    以官方的uni-ui为例，在HBuilderX "新建项目界面"  选择 "uni-ui 项目模板"，只需要在页面中敲 "u",就可以拉出大量组件代码块，直接选择，即可使用。

                                                    这样大幅提高开发效率，降低使用门槛。

                                                    在uni-app插件市场下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。


                                <3>、自定义easycom配置的示例

                                            easycom是自动开启的，不需要手动开启，有需求时可以在 pages.json 的 easycom 节点进行个性化设置：如关闭自动扫描，或自定义扫描匹配组件的策略。

                                            设置参数如下：

                                        ★、属性列表：

                                                属性	        类型	        默认值	        描述

                                                autoscan	    Boolean	        true	    是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件

                                                custom	        Object	        -	        以正则方式自定义组件匹配规则。如果autoscan不能满足需求，可以使用custom自定义匹配规则


                                           如果你的组件，不符合easycom前述的路径规范。可以在pages.json的easycom节点中自行定义路径规范。


                                           如果需要匹配node_modules内的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则，
                                           
                                           其中packageName为安装的包名，/path/to/vue-file-$1.vue为vue文件在包内的路径。

                                           eg:

                                                "easycom": {
                                                    "autoscan": true,
                                                    "custom": {
                                                        "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
                                                        "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
                                                    }
                                                }

                                         ★、说明：

                                                ①、easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用。

                                                ②、easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件。

                                                ③、在组件名完全一致的情况下，easycom引入的 "优先级低于手动引入"（区分连字符形式与驼峰形式）。

                                                ④、考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。

                                                ⑤、easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。
                                                        
                                                    不处理后缀为.nvue的组件。
                                                    
                                                    因为nvue页面引入的组件也是.vue组件。
                                                    
                                                    可以参考uni ui，使用vue后缀，同时兼容nvue页面。

                                                ⑥、nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持easycom

                                                ⑦、vue 与 uvue 组件优先级，详见 ：https://doc.dcloud.net.cn/uni-app-x/component/#priority


                                         ★、Bug & Tips

                                                   HBuilderX 3.96 版本以下uni-app x项目，当页面文件名与easycom的组件名一样时，会渲染异常，可以通过调整页面文件名规避该Bug。 


                    */

                    /*
                        十、tabBar

                             <1> 、概述

                                        如果应用时一个多tab 应用，可以通过tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

                                        在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。

                                        在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。

                                    ★、注意点：

                                                ①、当设置 position 为 top 时，将不会显示 icon

                                                ②、tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

                                                ③、tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）

                                                ④、tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。

                                                ⑤、顶部的 tabbar 目前仅微信小程序上支持。

                                                    需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，
                                                    
                                                    而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

                            <2> 、属性列表：

                                            属性	        类型	       必填	       默认值	    描述	                                                    平台差异说明

                                        1、color	        HexColor	    是		            tab 上的文字默认颜色

                                        2、selectedColor	HexColor	    是		            tab 上的文字选中时的颜色	
                                        
                                        3、backgroundColor	HexColor	    是		            tab 的背景色	
                                        
                                        4、borderStyle	    String	        否	        black	tabbar 上边框的颜色，可选值 black/white，、
                                                                                                black对应颜色rgba(0,0,0,0.33)，
                                                                                                white对应颜色rgba(255,255,255,0.33)。	                                App 2.3.4+ 、H5 3.0.0+、微信小程序
                                        
                                        5、blurEffect	    String	        否	        none	iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明）	App 2.4.0+ 支持、H5 3.0.0+（只有最新版浏览器才支持）
                                        
                                        6、list	            Array	        是		            tab 的列表，详见 list 属性说明，最少2个、最多5个 tab	
                                       
                                        7、position	        String	        否	        bottom	可选值 bottom、top	top 值仅微信小程序支持
                                        
                                        8、fontSize	        String	        否	        10px	文字默认大小	                                                        App 2.3.4+、H5 3.0.0+
                                        
                                        9、iconWidth	    String	        否	        24px	图标默认宽度（高度等比例缩放）	                                          App 2.3.4+、H5 3.0.0+
                                        
                                        10、spacing	        String	        否	        3px	    图标和文字的间距	                                                     App 2.3.4+、H5 3.0.0+
                                        
                                        11、height	        String	        否	        50px	tabBar 默认高度	                                                        App 2.3.4+、H5 3.0.0+
                                        
                                        12、midButton	    Object	        否		            中间按钮 仅在 list 项为偶数时有效	                                      App 2.3.4+、H5 3.0.0+
                                        
                                        13、iconfontSrc	    String	        否		            list设置 iconfont 属性时，需要指定字体文件路径	                           App 3.4.4+、H5 3.5.3+
                                        
                                        14、backgroundImage	String	        否		            设置背景图片,优先级高于 backgroundColor	App
                                        
                                        15、backgroundRepeat String	        否		            设置标题栏的背景图平铺方式，
                                                                                                可取值："repeat" - 背景图片在垂直方向和水平方向平铺；
                                                                                                "repeat-x" - 背景图片在水平方向平铺，垂直方向拉伸；
                                                                                                "repeat-y" - 背景图片在垂直方向平铺，水平方向拉伸；
                                                                                                "no-repeat" - 背景图片在垂直方向和水平方向都拉伸。 
                                                                                                默认使用 "no-repeat"	App
                                       
                                        16、redDotColor	    String	        否		            tabbar上红点颜色


                            <3>、list属性列表

                                                其中 list 接收一个数组，数组中的每个项都是一个对象，器属性值如下：

                                                    属性	        类型	    必填	    说明	                                                                平台差异

                                                1、pagePath	        String	    是	        页面路径，必须在 pages 中先定义	

                                                2、text	            String	    是	        tab 上按钮文字，在 App 和 H5 平台为非必填。
                                                                                            例如中间可放一个没有文字的+号图标	

                                                3、iconPath	        String	    否	        图片路径，icon 大小限制为40kb，
                                                                                            建议尺寸为 81px * 81px，
                                                                                            当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标	

                                                4、selectedIconPath	String	    否	        选中时的图片路径，icon 大小限制为40kb，
                                                                                            建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效	

                                                5、visible	        Boolean	    否	        该项是否显示，默认显示	App (3.2.10+)、H5 (3.2.10+)

                                                6、iconfont	        Object	    否	        字体图标，优先级高于 iconPath


                            <4>、tabbar 常见问题

                                            ①、tabbar 的 js api ，可实现动态显示隐藏  （如弹出层无法覆盖tabbar）、  内容修改（如国际化）、item加角标等功能。

                                                hello uni-app 中也有示例。

                                            ②、tabbar 的 item 点击事件见 "页面生命周期"的 onTabItemTap 生命周期。

                                            ③、代码跳转到 tabbar 页面，api "只能" 使用 uni.switchTab，不能使用uni.navigateTo、uni.redirectTo；

                                                    使用navigator组件跳转时必须设置open-type="switchTab"

                                            ④、abbar 的默认高度，在不同平台不一样。App端的默认高度在HBuilderX 2.3.4起从56px调整为50px，与H5端统一。

                                                    开发者也可以自行设定高度，调回56px。详见 ：https://uniapp.dcloud.io/tutorial/syntax-css.html#%E5%9B%BA%E5%AE%9A%E5%80%BC

                                            ⑤、tabbar 在H5端是div模拟的，属于前端屏幕窗口的一部分，如果要使用bottom居底定位方式，
                                                
                                                    应该使用css变量--window-bottom，比如悬浮在tabbar上方10px的按钮，样式如下bottom: calc(var(--window-bottom) + 10px)

                                            ⑥、中间带+号的tabbar模板例子，参考（https://ext.dcloud.net.cn/plugin?id=98）。
                                                
                                                    可跨端，但 "+" 号不凸起。如需中间凸起，配置tabbar的midButton。

                                            ⑦、如果是需要先登录、后进入tab页面，不需要把登录页设为首页，首页仍然是tabbar页，可参考云端一体登录模板

                                            ⑧、前端弹出遮罩层挡不住tabbar的问题，跨端处理方式时动态隐藏tabbar。

                                                App端可以使用plus.nativeObj.view或subNVue做弹出和遮罩，可参考这个底部原生图标分享菜单例子

                                            ⑨、微信小程序模拟器1.02.1904090版有bug，在缩放模拟器页面百分比后，tabbar点击多次后就会卡死。真机无碍，使用时注意

                                            ⑩、PC宽屏上，当页面存在topWindow或leftWindow或rightWindow等多窗体结构时，若想改变 tabbar 显示的位置，
                                            
                                                请使用 custom-tab-bar组件 配置，若想隐藏 tabbar，可以使用如下 css（好处是可以和 leftwindow 等窗体联动）：

                                                    .uni-app--showleftwindow + .uni-tabbar-bottom {
                                                        display: none;
                                                    }


                             <5>、代码示例

                                            "tabBar": {
                                                "color": "#7A7E83",
                                                "selectedColor": "#3cc51f",
                                                "borderStyle": "black",
                                                "backgroundColor": "#ffffff",
                                                "list": [{
                                                    "pagePath": "pages/component/index",
                                                    "iconPath": "static/image/icon_component.png",
                                                    "selectedIconPath": "static/image/icon_component_HL.png",
                                                    "text": "组件"
                                                }, {
                                                    "pagePath": "pages/API/index",
                                                    "iconPath": "static/image/icon_API.png",
                                                    "selectedIconPath": "static/image/icon_API_HL.png",
                                                    "text": "接口"
                                                }]
                                            }


                            <6>、自定义tabbar
                                
                                    原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。

                                    但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。

                                    ①、H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，
                                    
                                        此时可以使用 custom-tab-bar组件 来自定义

                                    ②、普通自定义tabBar：使用view自行绘制tabBar。

                                            如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。

                                            所以这种情况建议使用单页方式。
                                            
                                            单页方式，如果是复杂页面，应用性能会下降明显，需减少页面复杂度。、
                                            
                                            如果是App端，nvue单页的性能会显著高于vue页面

                                    ③、微信小程序自定义tabbar：微信提供一直基于webview自定义tabBar的方案。该功能体验不佳，不太推荐使用。

                                            如果要使用，参考微信文档，项目根创建 custom-tab-bar 目录，
                                            
                                            注意里边的代码是 wxml,wxss，不是 vue，uni-app编译器会直接拷贝该目录到微信小程序中

                                    ③、原生的tabbar有且只有一个且在首页。二级页如需的tab，需自行编写view来实现。一般二级页面更适合的导航是 segement组件

                                                                        
                    */

                    /*
                        十一、condition

                                启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如： 小程序转发后，用户点击所打开的页面。

                                <1>、属性说明

                                            属性	    类型	    是否必填	    描述

                                        1、current	    Number	    是	        当前激活的模式，list节点的索引值

                                        2、list	        Array	    是	        启动模式列表  

                                <2>、list说明

                                            属性	    类型	    是否必填	    描述

                                          1、name	    String	    是	        启动模式名称

                                          2、path	    String	    是	        启动页面路径

                                          3、query	    String	    否	        启动参数，可在页面的 onLoad 函数里获得


                                   ★、注意：

                                            ①、在App里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式，如下图：

                                                    https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/condition.png

                                            ②、快手小程序需要在 project.private.config.json 文件中配置，参考 官方文档

                                                    文档地址：https://open.kuaishou.com/docs/develop/developerTools/Localization-project.html#%E6%94%AF%E6%8C%81%E5%AD%97%E6%AE%B5

                                <3>、代码示例：

                                            "condition": { // 模式配置，仅开发期间生效
                                                "current": 0, // 当前激活的模式（list 的索引项）
                                                "list": [{
                                                        "name": "swiper", //模式名称
                                                        "path": "pages/component/swiper/swiper", //启动页面，必选
                                                        "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
                                                    },
                                                    {
                                                        "name": "test",
                                                        "path": "pages/component/switch/switch"
                                                    }
                                                ]
                                            }
                    */

                    /*
                        十二、subPackages


                              <1>、概述
                                    
                                    ①、小程序分包

                                            分包加载配置，此配置为小程序的 "分包加载机制"。

                                            因为小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

                                            所谓的主包，即放置默认启动页面、tabBar页面，以及一些所有分包都需用到的公共资源/JS脚本；

                                            而分包则是根据pages.json 的配置进行划分。

                                            在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，

                                            下载完成后再进行展示。此时终端界面会有等待提示。

                                    ②、App分包

                                            App默认为整包。从uni-app 2.7.12+ 开始，vue2模式也兼容了小程序的分包配置。其目的不用于下载提速，而用于首页是vue时的启动提速。

                                            App下开启分包，除在pages.json中配置分包规则外，还需要在manifest中设置在app端开启分包设置，

                                            详见： https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization


                              <2>、属性说明

                                         subPackages 节点接收一个数组，数组每一项都是应用的子包，器属性值如下：

                                                    属性	    类型	    是否必填	    描述

                                                1、root	    String	    是	          子包的根目录

                                                2、pages	    Array	    是	          子包由哪些页面组成，参数同 pages

                                        ★、注意：

                                                ①、subPackages 里的pages的路径是 root 下的相对路径，不是全路径。

                                                ②、微信小程序每个分包的大小是2M，总体积一共不能超过20M

                                                ③、百度小程序每个分包的大小是2M，总体积一共不能超过8M。

                                                ④、支付宝小程序每个分包的大小是2M，总体积一共不能超过8M。

                                                ⑤、QQ小程序每个分包的大小是2M，总体积一共不能超过24M。

                                                ⑥、抖音小程序每个分包的大小是2M，总体积一共不能超过16M
                                                
                                                    （抖音小程序基础库 1.88.0 及以上版本开始支持，抖音小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本）。

                                                ⑦、快手小程序每个分包的大小是2M，总体积一共不能超过24M。

                                                ⑧、分包下支持独立的 static 目录，用来对静态资源进行分包。

                                                ⑨、uni-app内支持对微信小程序、QQ小程序、百度小程序、支付宝小程序、抖音小程序(HBuilderX 3.0.3+)、快手小程序分包优化，
                                                
                                                    即将静态资源或者js文件放入分包内不占用主包大小。详情请参考：关于分包优化的说明
                                                    
                                                    https://uniapp.dcloud.net.cn/collocation/manifest#%E5%85%B3%E4%BA%8E%E5%88%86%E5%8C%85%E4%BC%98%E5%8C%96%E7%9A%84%E8%AF%B4%E6%98%8E

                                                ⑩、针对vendor.js过大的情况可以使用运行时压缩代码

                                                       ★、 HBuilderX创建的项目勾选 "运行"--"运行到小程序模拟器"--"运行时是否压缩代码"

                                                       ★、cli创建的项目可以在package.json中添加参数-minimize
                                                        
                                                            示例 "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"


                              <3>、使用方法：

                                         假设支持分包的 uni-app 目录结构如下：

                                                    ┌─pages
                                                    │  ├─index
                                                    │  │  └─index.vue
                                                    │  └─login
                                                    │     └─login.vue
                                                    ├─pagesA
                                                    │  ├─static
                                                    │  └─list
                                                    │     └─list.vue
                                                    ├─pagesB
                                                    │  ├─static
                                                    │  └─detail
                                                    │     └─detail.vue
                                                    ├─static
                                                    ├─main.js
                                                    ├─App.vue
                                                    ├─manifest.json
                                                    └─pages.json

                                        则需要在 pages.json 中填写：

                                                {
                                                    "pages": [{  // 主包
                                                        "path": "pages/index/index",
                                                        "style": { ...}
                                                    }, {
                                                        "path": "pages/login/login",
                                                        "style": { ...}
                                                    }],
                                                    // 分包配置
                                                    "subPackages": [
                                                    { // pagesA 分包
                                                        "root": "pagesA",
                                                        "pages": [{
                                                            "path": "list/list",
                                                            "style": { ...}
                                                        }]
                                                    }, 
                                                    { // pagesB 分包
                                                        "root": "pagesB",
                                                        "pages": [{
                                                            "path": "detail/detail",
                                                            "style": { ...}
                                                        }]
                                                    }],
                                                    "preloadRule": {
                                                        "pagesA/list/list": {
                                                            "network": "all",
                                                            "packages": ["__APP__"]
                                                        },
                                                        "pagesB/detail/detail": {
                                                            "network": "all",
                                                            "packages": ["pagesA"]
                                                        }
                                                    }
                                                }
                */

                /*
                    十三、preloadRule  

                                分包预载配置。

                                配置 preloadRule 后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

                                preloadRule 中， key 是页面路径，value是进入此页面的预下载配置，每个配置有以下几项：

                                字段	    类型	        必填	    默认值	        说明

                            1、packages	    StringArray	    是	        无	        进入页面后预下载分包的 root 或 name。__APP__ 表示主包。

                            2、network	    String	        否	        wifi	    在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）


                            app的分包，同样支持 preloadRule ,但网络规则无效。
                */

        </script>
    </body>
</html>